import { graphql } from 'gatsby';

import Callout from '../../components/Callout';
import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';

import Check from '../../examples/Form/Check';
import CheckApi from '../../examples/Form/CheckApi';
import CheckInline from '../../examples/Form/CheckInline';
import NoLabels from '../../examples/Form/NoLabels';
import Switch from '../../examples/Form/Switch';

# Checks and radios

<p className="lead">
  Create consistent cross-browser and cross-device checkboxes and radios with
  our completely rewritten checks component.
</p>

For the non-textual checkbox and radio controls, `FormCheck`
provides a single component for both types that adds some additional
styling and improved layout.

## Default (stacked)

By default, any number of checkboxes and radios that are immediate
sibling will be vertically stacked and appropriately spaced with
FormCheck.

<ReactPlayground codeText={Check} />

## Switches

A switch has the markup of a custom checkbox but uses `type="switch"`
to render a toggle switch. Switches also support the same customizable
children as `<FormCheck>`.

<ReactPlayground codeText={Switch} />

<Callout>
  You can also use the <code>{'<Form.Switch>'}</code> alias which encapsulates
  the above, in a very small component wrapper.
</Callout>

## Inline

Group checkboxes or radios on the same horizontal row by adding the `inline` prop.

<ReactPlayground codeText={CheckInline} />

## Without labels

When you render a FormCheck without a label (no `children`)
some additional styling is applied to keep the inputs from collapsing.

**Remember to add an `aria-label` when omitting labels!**

<ReactPlayground codeText={NoLabels} />

## Customizing FormCheck rendering

When you need tighter control, or want to customize how the `FormCheck` component
renders, it may better to use its constituent parts directly.

By provided `children` to the `FormCheck` you can forgo the default rendering and
handle it yourself. (You can still provide an `id` to the `FormCheck` or
`FormGroup` and have it propagate to the label and input).

<ReactPlayground codeText={CheckApi} />

## API

<ComponentApi metadata={props.data.FormCheck} exportedBy={props.data.Form} />
<ComponentApi
  metadata={props.data.FormCheckInput}
  exportedBy={props.data.FormCheck}
/>
<ComponentApi
  metadata={props.data.FormCheckLabel}
  exportedBy={props.data.FormCheck}
/>

export const query = graphql`
  query FormCheckRadioQuery {
    Form: componentMetadata(displayName: { eq: "Form" }) {
      ...ComponentApi_metadata
    }
    FormCheck: componentMetadata(displayName: { eq: "FormCheck" }) {
      ...ComponentApi_metadata
    }
    FormCheckInput: componentMetadata(displayName: { eq: "FormCheckInput" }) {
      ...ComponentApi_metadata
    }
    FormCheckLabel: componentMetadata(displayName: { eq: "FormCheckLabel" }) {
      ...ComponentApi_metadata
    }
  }
`;
